<template>
  <div class="menu-wrap">
    <el-cascader-panel 
      v-model="listModel"
      :options="data.options"
      @change="selectDep"
      :props="data.props"
    ></el-cascader-panel>
  </div>
</template>

<script lang="ts">
  import { Component, Vue, Prop } from "vue-property-decorator"
  import MenuOptions from './menu'
  @Component({})
  
  export default class Menu extends Vue {
    // prop
    @Prop({
      required: false,
      default: ''
    }) name!: string

    data: MenuData = {
      componentName: 'menu',
      options: MenuOptions,
      props: {
        expandTrigger: 'hover',
        emitPath: false
      }
    }
    listModel:string = ''
    created() {
    }
    selectDep(val:string){
      console.log('val',val)
      if(val.indexOf('http')>-1){
        window.open(val)
      }else{
        this.$router.push({name: val})
      }
      this.$emit('urlChange')
      console.log(this.listModel)
      this.listModel = ''
    }
  }
  export class MenuData {
    'componentName': string
    'options': OptionClass[]
    'props': PropsClass
  }
  export class OptionClass {
    'value': string
    'label': string
    'children': OptionClass[]| null
  }
  export class PropsClass {
    'expandTrigger': string
    'emitPath': boolean
  }
</script>

<style lang="scss">
  @import "@/assets/scss/variables";

  .menu-wrap {
    width: 103%;
    background-color: #E9EEF3
  }
  .el-icon-check{
    display: none
  }
</style>

